<template>
	<view>
	<div style="display: flex;
	  justify-content: center;
	  align-items: center;">
		
	<div id="sos"  @click="callPhoeHandle">SOS</div>
	</div>
	<center style=" display: flex;
	  justify-content: center;
	  align-items: center;">
		
				<div >
					用户的名字是：{{info.user_name}}<br>
					紧急联系人手机号是：{{info.pphone}}<br>
					紧急联系人姓名是：{{info.pname}}<br>
				</div>
	</center>
	<center style=" display: flex;
	  justify-content: center;
	  align-items: center;">
			<div @click="callPhoeHandle" style="background-color: #ff6b5f;font-size:20px;border-radius: 20px;width:80%;height: 50px;padding-top: 10px;display: flex;
	  justify-content: center;
	  align-items: center;">立 即 拨 打</div>
	</center>
	
	</view>
</template>

<script>
	import config from '@/config'
	export default {
		data() {
			return {
				uni,
				usr: '',
				info: {
					user_name:'',
					pphone:'',
					pname:''
				},
			}
		},
		onLoad() {
			var that = this;
			uni.request({
				url: `${config.baseUrl}/sos/getsos?token=` + uni.getStorageSync('token'),
				method: 'GET',
				success(r) {
					if (r.data.succ) {
						that.info = r.data.data;
					}
				}
			});
		},
		methods: {
			callPhoeHandle(){
				uni.makePhoneCall({
					phoneNumber:this.info.pphone,
				})
			}
		}
	}
</script>

<style scoped>
	   .top{
		   
	   	width: auto;
	   	height: 20px;
	   	/* background-color: #FFFFFF; */
	   }
	
</style>
<style scoped>
	
	body {
	  text-align: center;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	}
	#sos {
	  outline: none;
	  width: 200px;
	  height: 200px;
	  margin-top: 30px;
	  border: none;
	  border-radius: 100px;
	  background-color: red;
	  color: white;
	  font-size: 3em;
	  font-weight: bold;
	  border: 5px solid pink;
	  /* box-shadow: 0 0 5px gray; */
	  display: flex;
	  justify-content: center;
	  align-items: center;
	}
	#sos:focus {
	  /* box-shadow: 0 0 1px black; */
	}
</style>